<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
	<script type="text/javascript" src="ext-all-debug.js" charset='UTF-8'></script>

	<style>
.target_div {
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
</style>
<style mce_bogus="1">
.target_div {
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
</style>
</head>
<body>
	<script type="text/javascript">
		Ext
				.onReady(function() {
					drag_config_obj = {
						//拖拽的组标识
						group : 'dd',
						//startDrag 为Ext.dd.DDProxy中的开始拖动的时候的方法，和onStartDrag用法类似
						startDrag : function(x, y) {
							//this.getEl()获得的是一个[object HTMLTableRowElement]
							//也就是一个table的一行的dom对象，有了它就好办了！
							//source_html = this.getEl().innerHTML;
							//将被拖动的那一行设置字体颜色变为红色

							/********************************************/
							//	这里的this指向的就是拖动的源，也就是被拖动的那一行
							/********************************************/
							Ext.fly(this.getEl()).setStyle({
								'color' : 'red'
							});
						},
						//一旦拖动开始触发的函数
						onStartDrag : function() {

							Ext.fly(this.getEl()).setStyle({
								'color' : 'red'
							});
						},
						//在释放的地方不是目标位置，但是在这里释放了，在这之前的处理函数
						beforeInvalidDrop : function() {
							//如果放错地方了,就恢复样式
							Ext.fly(this.getEl()).setStyle({
								'color' : ''
							});
						},
						//在拖动项释放到目标项之前的处理函数，只有释放的目标是指定的目标项目的时候才会触发
						beforeDragDrop : function(target, e, id) {
							Ext.fly(this.getEl()).setStyle({
								'color' : ''
							});

							//在拖动项的表格中删除拖动走了的那一行
							Ext.fly(this.getEl()).remove();

							//将拖动的这一行添加到目标表格中
							Ext.fly(this.getEl()).appendTo(target.getEl());
							Ext.fly(target.getEl()).setStyle({
								'color' : ''
							});

							//如果没有下面这一行的函数调用，那么移动了的行就不能再一次拖动了，
							//类似于重新绑定一次，这样就可以重复多次的拖动
							init_dd();
						},
						//在将拖动项拖动离开目标区域之前
						beforeDragOut : function(target, e, id) {
							//target 指的是目标表格的对象
							Ext.fly(target.getEl()).setStyle({
								'color' : ''
							});
						},
						//将拖动项拖动到目标范围上方的时候触发的函数，这里的target是目标对象
						beforeDragOver : function(target, e, id) {
							Ext.fly(target.getEl()).setStyle({
								'color' : 'red'
							});
						},
					};

					drop_config_obj = {
						notifyDrop : function(source, e, data) {
							//如需对落下验证（drop validation）的话可重写该方法。
							//这里的source指向的就是被我们拖动的这一行的tr对象了啦
							Ext.get('show_area').dom.innerHTML = source.getEl().innerHTML;

							/********************************************/
							//	这里的this指向的是整个target区域也就是DropTarget
							/********************************************/
							Ext.get('show_all_target_area').dom.innerHTML = this
									.getEl().innerHTML;

							return true;
						},
						group : 'dd'
					};

					var init_dd = function() {

						//定义拖动源和拖动目的地
						Ext.select('#drag_table tr').each(
								function(e) {
									new Ext.dd.DragSource(e.dom,
											drag_config_obj);
									new Ext.dd.DropTarget('drag_table_target',
											drop_config_obj);
								});

						//交换拖动源和拖动目的地，使得可以反过来拖动
						Ext.select('#drag_table_target tr').each(
								function(e) {
									new Ext.dd.DragSource(e.dom,
											drag_config_obj);
									new Ext.dd.DropTarget('drag_table',
											drop_config_obj);
								});
					}

					//页面加载后初始化
					init_dd();

				});
	</script>
	<table width="500" border="1" id="drag_table">
		<tr>
			<td>111</td>
			<td>222</td>
			<td>333</td>
			<td>444</td>
		</tr>
		<tr>
			<td>555</td>
			<td>666</td>
			<td>777</td>
			<td>888</td>
		</tr>

		<tr>
			<td>000</td>
			<td>999</td>
			<td>121</td>
			<td>232</td>
		</tr>

		<tr>
			<td>343</td>
			<td>454</td>
			<td>565</td>
			<td>676</td>
		</tr>
	</table>
	<br>
		<hr>
			<br>
				<table width="500" border="1" id="drag_table_target">
					<tr>
						<td>AAA</td>
						<td>BBB</td>
						<td>CCC</td>
						<td>DDD</td>
					</tr>
					<tr>
						<td>EEE</td>
						<td>FFF</td>
						<td>GGG</td>
						<td>HHH</td>
					</tr>

					<tr>
						<td>III</td>
						<td>JJJ</td>
						<td>KKK</td>
						<td>LLL</td>
					</tr>

					<tr>
						<td>MMM</td>
						<td>NNN</td>
						<td>OOO</td>
						<td>PPP</td>
					</tr>
				</table>
				<p>拖动后这里显示当前被拖动的这一行的区域</p>
				<div id="show_area"></div>
				<p>拖动后这里显示真个target区域的数据</p>
				<div id="show_all_target_area"></div>
</body>
</html>
